<script lang="ts" setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
const [messageApi, contextHolder] = message.useMessage();

const data = ref({
  img: "./console/merchandiseDetail.png",
  name: "阿帕云主控部署（单机）",
  price: "300",
  desc: "阿帕云主控端单机部署，适用大陆版、国际版、分销版，仅支持新服务器纯净部署；",
  extra: "如需指定已有环境服务器，需评估后额外收费。",
});

// const toCart = () => {
//   window.location.href = "/#/cart";
// };

const buy = () => {
  messageApi.success("商品已添加到购物车！");
};
</script>
<template>
  <div class="flex flex-col items-center">
    <div class="pt-5 pr-2 pl-2 md:p-10 flex justify-center flex-col md:flex-row items-center">
      <!-- hidden md:block -->
      <img :src="data.img" alt="" class="rounded md:mr-5 shrink-0 w-100 mb-5 md:mb-0" />
      <div class="flex flex-col">
        <p class="font-bold text-lg">
          {{ data.name }}
        </p>
        <p class="text-slate-600 mb-5 md:mb-20">
          {{ data.desc }}
        </p>

        <div class="flex flex-col border-1 p-3 rounded bg-gray-50">
          <p class="flex items-end">
            <span class="text-sm text-slate-700 w-20">价格：</span>
            <span class="text-4xl text-red-600 font-bold">
              {{ data.price }}
            </span>
            <span class="text-base text-red-600">元/次</span>
          </p>
          <p class="mb-0 flex">
            <span class="block w-25 text-slate-700 text-sm">价格说明：</span>
            <span class="text-sm">
              {{ data.extra }}
            </span>
          </p>
        </div>

        <p class="w-full flex justify-end">
          <a-button class="w-50 mt-5" type="primary" @click="buy">
            购买服务
          </a-button>
        </p>
      </div>
    </div>

    <div class="flex flex-col items-center border-t-1 w-full justify-center">
      <p class="text-gray-700 md:w-300 pt-7 pb-2 text-slate-500 text-lg block">
        服务内容
      </p>

      <p class="md:w-300 pl-5 pr-5 md:pl-0 md:pr-0 text-gray-400 text-sm">
        {{ data.desc }}
      </p>
    </div>
  </div>

  <!-- 
    @click="toCart"
   -->
  <router-link to="/cart">
    <div class="fixed md:bottom-80 rounded-full md:right-40 bottom-10 right-5 h-15 w-15 p-3 cart">
      <img src="/console/cart2.png" class="w-full" alt="" />
    </div>
  </router-link>
  <context-holder />
</template>
<style lang="scss" scoped>
.cart {
  background-color: #ff6040;
  cursor: pointer;
}
</style>
